<template>
  <!-- 统计 -->
  <view class="main">
    <view class="top">
      <view class="topLeft">
        <view class="tab" @tap="changeTab('quantity')">
          <image src="../../static/img/other/statistical-deat.png" class="tabIcon" />数量统计
        </view>
        <view class="tab" @tap="changeTab('batch')">
          <image src="../../static/img/other/statistical-batch.png" class="tabIcon" />批次统计
        </view>
        <view class="backCard" :style="selectedStatus">
          <view class="bottomBorder"></view>
        </view>
      </view>
      <view class="topRight">
        <input placeholder="请输入物资名称或编号" v-model="searchParam" placeholder-class="input-placeholder"
          @confirm="seachConfirm" />
        <view class="iconBut" @tap="seachConfirm">
          <image src="../../static/img/statistics/seachH.png" class="tabIcon" />
        </view>
      </view>
    </view>
    <view class="listCard">
      <view class="cardTitle">
        <view class="titleText" v-for="(item, index) in useStaStore.titleStatus" :style="item.style">{{ item.text }}
        </view>
      </view>
      <scroll-view :scroll-y="true" class="cardList">
        <view class="listData" v-for="(list, indexNum) in useStaStore.dataList" :key="indexNum">
          <view class="titleText" v-for="(item, index) in useStaStore.titleStatus" :key="index" :style="item.style">{{
            item.name === 'GoodsNumber' ? list[item.name] + '/' + list['Units'] : list[item.name] || '-' }}
          </view>
        </view>
      </scroll-view>
      <zk-pagination style="margin-top: 6px;" :total="useStaStore.total" :setPage="setPage"
        @event-change="setPageNum"></zk-pagination>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { useStatisticStore } from "@/stores/modules/statistics";
import { useMemberStore } from "@/stores/modules/member";
const useStaStore = useStatisticStore()
const useMember = useMemberStore()

let setPage = reactive({
  state: true,
  num: 1
})// 传入分页器的页码
let searchParam = ref('')// 搜索内容

let selectedStatus = computed(() => {
  switch (useStaStore.select) {
    case 'quantity':
      return 'left: 0;';

    case 'batch':
      return 'left: 134px;';

    default:
      break;
  }
})// 选中背景偏移量

let changeTab = (name: string) => {
  if (useStaStore.select === name) return
  useStaStore.select = name
  oldValue = ''
  searchParam.value = ''
  setPage.num = 1
  setPage.state = !setPage.state// 切换状态以确保唤醒分页器组件侦听器进行处理
}// 切换顶部Tab

let oldValue = ''// 存储旧的值
const seachConfirm = () => {
  if (searchParam.value.trim() === oldValue) return
  oldValue = searchParam.value.trim()
  setPage.num = 1
  setPage.state = !setPage.state// 切换状态以确保唤醒分页器组件侦听器进行处理
}// 搜索

let setPageNum = (e: object) => {
  let data = {
    GodownCode: useMember.defaultStash.GodownCode,
    GoodsStatus: "",
    GoodsType: "",
    searchParam: searchParam.value.trim(),
    ...e
  }
  useStaStore.getStatisticsData(data)
}// 请求数据

onMounted(() => {
  useStaStore.select = 'quantity'
  let data = {
    GodownCode: useMember.defaultStash.GodownCode,
    GoodsStatus: "",
    GoodsType: "",
    pageNum: 1,
    pageSize: 10,
    searchParam: ""
  }
  useStaStore.getStatisticsData(data)
})

</script>

<style lang="scss" scoped>
.main {
  width: 790px;
  height: 448px;
  margin: 0 auto;
  // background-color: aqua;

  .top {
    display: flex;
    justify-content: space-between;
    width: 790px;
    height: 52px;

    .topLeft {
      position: relative;
      display: flex;
      justify-content: center;
      width: 284px;
      height: 52px;
      margin-left: 16px;

      .tab {
        position: relative;
        z-index: 99;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 134px;
        height: 52px;
        font-size: 12px;
        font-weight: 400;
        color: rgb(50, 150, 111);

        .tabIcon {
          width: 17px;
          height: 17px;
          margin-right: 7px;
        }
      }

      .backCard {
        position: absolute;
        z-index: 0;
        transition: left 0.2s;
        width: 150px;
        height: 52px;
        background-image: url('~@/static/img/statistics/ordels.png');
        background-size: 150px 52px;

        .bottomBorder {
          width: 70px;
          height: 2px;
          border-radius: 1px;
          background-color: #32966F;
          margin: 42px auto 0;
        }

      }
    }

    .topRight {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 240px;
      height: 40px;
      margin: 4px 0 8px;
      border-radius: 8px;
      padding: 9px 0 9px 12px;
      border: 1px solid rgb(228, 228, 228);
      background-color: #ffffff;

      input {
        font-size: 14px;
      }

      .iconBut {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 38px;
        height: 38px;
        border-left: 1px solid rgb(228, 228, 228);

        image {
          width: 16px;
          height: 16px;
        }
      }
    }


  }

  .listCard {
    width: 790px;
    height: 398px;
    background-color: #ffffff;
    border-radius: 10px;
    padding: 10px 21px 0;

    .cardTitle {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      height: 40px;
      border-radius: 6px;
      padding: 0 12px;
      font-size: 14px;
      color: #ADAFB8;
      background-color: #F2F3F4;

      .titleText {
        text-align: center;
      }
    }

    .cardList {
      width: 100%;
      height: 300px;
      font-size: 14px;

      .listData {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 48px;
        padding: 0 12px;
        border-bottom: 1px solid rgb(244, 244, 244);

        .titleText {
          text-align: center;
        }
      }
    }
  }
}

::v-deep.input-placeholder {
  font-size: 14px;
  color: rgb(204, 204, 211);
}
</style>
